<style lang="scss" scoped>
    @import "../../utils/base.scss";
    .p_content{
        font-size:13px;
        min-width: 100px;
        max-width: 200px;  
        height: auto;  
        word-wrap:break-word;  
        word-break:break-all;  
        overflow: hidden;
        padding-bottom: 4px;
    }
    .ivu-tooltip{
        width: 100%;
        
    }
</style>
<template>
    <div ref='base' class="quest_content" style="overflow-y:auto" >
        <!-- 租户详情 -->
        <template id="baseInfo">
            <div class="qheader" :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
                <p>提单人信息</p>
            </div>
            <div class="gcontent">
                <Form :model="applyinfo.base" :label-width="labelWidth" label-position="left" class="form form_left" >
                    <Row v-if="reqId != null && reqId != ''">
                        <Col span="8" >
                            <FormItem label="工单ID：" >
                                <Input v-model="reqId"  :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="申请人姓名：" >
                                <Input v-model="applyinfo.base.userName"  :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="申请人身份证:"  >
                                <Input v-model="applyinfo.base.applyCardId" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="申请人电话：" >
                                <Input v-model="applyinfo.base.telephone" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="申请人邮箱:"  >
                                <Input v-model="applyinfo.base.email" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="申请人单位：" >
                                <Input v-model="applyinfo.base.applydept" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    
                </Form>
            </div>
            
        </template>
        <!-- 项目详情 -->
        <!-- 资源清单 -->
        <div id="resourceInfo">
            <div class="qheader" :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
                <p>申请物理机资源</p>
            </div>
            <div class="gcontent" style="padding-bottom:10px;">
                <template>
                    <Form :label-width="labelWidth" label-position="left" class="form form_left" >
                            <Row v-show="!ifedit || applyinfo.severs.length != 0">
                                <Col span="21" style="width: 100%;">
                                    <template>
                                        <!-- <template> -->
                                            <Table :columns="resourcesInfo.severColumns" :data="applyinfo.severs" border  >
                                                <template slot-scope="{ row, index }" slot="severName" >
                                                    <p v-if="ifedit">{{applyinfo.severs[index].severName}}</p>
                                                    <Select v-else v-model="applyinfo.severs[index].severId" :transfer="resourcesInfo.transfer"
                                                        @on-change="setSeverID(index)" :disabled="ifedit">
                                                        <template v-for="i in applyinfo.resourcesInfo.seversList ">
                                                            <Option :value="i.id" :label="i.severName">
                                                                <Tooltip max-width="300" :disabled="tooltipDisabled"
                                                                    placement="right-end" :transfer="true" style="white-space: nowrap;">
                                                                    <p style="width: 100%;">{{i.severName}}</p>
                                                                    <div slot="content" style="font-size:0;">
                                                                        {{i}}
                                                                        <p class="p_content">CPU数量：{{i.cpuQuantity}}</p>
                                                                        <p class="p_content">CPU型号：{{i.cpuDes}}</p>
                                                                        <p class="p_content">网卡数量：{{i.ncquantity}}</p>
                                                                        <p class="p_content">网卡型号：{{i.ncdes}}</p>
                                                                        <p class="p_content">内存数量：{{i.ramQuantity}}</p>
                                                                        <p class="p_content">内存型号：{{i.ramDes}}</p>
                                                                        <p class="p_content">数据盘: {{i.dataVolumn + i.dataUnit}}</p>
                                                                        <p class="p_content">系统盘: {{i.sysVolumn + i.sysUnit}}</p>
                                                                    </div>
                                                                </Tooltip>
                                                            </Option>
                                                        </template>
                                                    </Select>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="os">
                                                    <p v-if="ifedit">{{applyinfo.severs[index].os}}</p>
                                                    <Select v-else v-model="applyinfo.severs[index].os"  :transfer="resourcesInfo.transfer" :disabled="ifedit">
                                                        <Option value="suse" >suse</Option>
                                                        <Option value="bc-linux" >bc-linux</Option>
                                                    </Select>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="sysRaid">
                                                     <p v-if="ifedit">{{applyinfo.severs[index].sysRaid}}</p>
                                                    <Select v-else v-model="applyinfo.severs[index].sysRaid"  :transfer="resourcesInfo.transfer" :disabled="ifedit">
                                                        <template v-for="item in applyinfo.resourcesInfo.seversList ">
                                                            <template v-if="item.id == applyinfo.severs[index].severId">
                                                                <Option v-for="(raid, k) in item.raidOptions" :key="k" :value="raid" >{{raid}}</Option>
                                                            </template>
                                                        </template>
                                                    </Select>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="dataRaid">
                                                    <p v-if="ifedit">{{applyinfo.severs[index].dataRaid}}</p>
                                                    <Select v-else v-model="applyinfo.severs[index].dataRaid"  :transfer="resourcesInfo.transfer" :disabled="ifedit">
                                                        <template v-for="item in applyinfo.resourcesInfo.seversList ">
                                                            <template v-if="item.id == applyinfo.severs[index].severId">
                                                                <Option v-for="(raid, k) in item.raidOptions" :key="k" :value="raid" >{{raid}}</Option>
                                                            </template>
                                                        </template>
                                                    </Select>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="place">
                                                    <p v-if="ifedit">{{applyinfo.severs[index].place}}</p>
                                                    <Select v-else v-model="applyinfo.severs[index].place"  :transfer="resourcesInfo.transfer" :disabled="ifedit">
                                                        <Option value="dmz域" >dmz域</Option>
                                                        <Option value="核心域" >核心域</Option>
                                                    </Select>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="quantity">
                                                    <p v-if="ifedit">{{applyinfo.severs[index].quantity}}</p>
                                                    <InputNumber v-else :min="0"  v-model="applyinfo.severs[index].quantity" :readonly="ifedit"/>
                                                </template>
                                                <template slot-scope="{ row, index }" slot="purpose">
                                                    <p v-if="ifedit">{{applyinfo.severs[index].purpose}}</p>
                                                    <Input v-else v-model="applyinfo.severs[index].purpose" type="text" :readonly="ifedit"/>
                                                </template>
                                                
                                                <template slot-scope="{ row, index }" slot="action" >
                                                    <Button v-if="!ifedit" @click="deleteRow(row, index)">删除</Button>
                                                    <Poptip :transfer="true" placement="top-end">
                                                        <Button>基础信息</Button>
                                                        <template v-if="ifedit">
                                                            <div slot="title">
                                                                {{applyinfo.severs[index].severName}}
                                                            </div>
                                                            <div slot="content">
                                                                <template v-for="i in applyinfo.resourcesInfo.seversList ">
                                                                    <template v-if="i.id == applyinfo.severs[index].severId">
                                                                        <div slot="content" style="font-size:0;">
                                                                            <p class="p_content">CPU数量: {{i.cpuQuantity}}</p>
                                                                            <p class="p_content">CPU型号: {{i.cpuDes}}</p>
                                                                            <p class="p_content">网卡数量: {{i.ncquantity}}</p>
                                                                            <p class="p_content">网卡型号: {{i.ncdes}}</p>
                                                                            <p class="p_content">内存数量: {{i.ramQuantity}}</p>
                                                                            <p class="p_content">内存型号: {{i.ramDes}}</p>
                                                                            <p class="p_content">数据盘: {{i.dataVolumn + i.dataUnit}}</p>
                                                                            <p class="p_content">系统盘: {{i.sysVolumn + i.sysUnit}}</p>
                                                                        </div>
                                                                    </template>
                                                                </template>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div slot="title">
                                                                {{applyinfo.severs[index].severName}}
                                                            </div>
                                                            <div slot="content">
                                                                <template v-for="i in applyinfo.resourcesInfo.seversList ">
                                                                    <template v-if="i.id == applyinfo.severs[index].severId">
                                                                        <div slot="content" style="font-size:0;">
                                                                            <p class="p_content">CPU数量: {{i.cpuQuantity}}</p>
                                                                            <p class="p_content">CPU型号: {{i.cpuDes}}</p>
                                                                            <p class="p_content">网卡数量: {{i.ncquantity}}</p>
                                                                            <p class="p_content">网卡型号: {{i.ncdes}}</p>
                                                                            <p class="p_content">内存数量: {{i.ramQuantity}}</p>
                                                                            <p class="p_content">内存型号: {{i.ramDes}}</p>
                                                                            <p class="p_content">数据盘: {{i.dataVolumn + i.dataUnit}}</p>
                                                                            <p class="p_content">系统盘: {{i.sysVolumn + i.sysUnit}}</p>
                                                                        </div>
                                                                    </template>
                                                                </template>
                                                            </div>
                                                        </template>
                                                    </Poptip>
                                                </template>
                                            </Table>
                                        <!-- </template> -->
                                    </template>
                                </Col>
                            </Row>
                    </Form>
                </template>
            </div>
        </div>
        
        <template>
            <div class="qheader" :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
                <p>附件</p>
            </div>
            <component ref="file" :is="'file'" :ifedit="ifedit" :filesList="filesList" :Papply="applyinfo"></component>
        </template>
        
    </div>
</template>

<script>
    import ajax from "../../ajax_util"
    import Axios from 'axios'
    import notice from '../../base/notice'
    import file from './settledin/file'

    export default {
        name: "apply",
        components:{
           notice,file
        },
        data () {
            return {
                tooltipDisabled: false,
                
                readonly: true, //是否只读
                labelWidth: 140,
                //资源清单相关基础信息
                resourcesInfo:{ 
                    severColumns:[
                        {
                            title: "*服务类型",
                            align: "center",
                            width: 140,
                            key: "severName",
                            slot: "severName",
                            fixed: 'left'
                        },
                        {
                            title: "*操作系统",
                            align: "center",
                            width: 110,
                            key: "id",
                            slot: "os"
                        },
                        {
                            title: "*raid方式",
                            align: "center",
                            children: [
                                {
                                    title: '*系统盘',
                                    align: 'center',
                                    width: 110,
                                    slot: "sysRaid"                            
                                },
                                {
                                    title: '*数据盘',
                                    align: 'center',
                                    width: 110,
                                    slot: "dataRaid"
                                },
                            ]
                        },
                        {
                            title: "*部署区域",
                            align: "center",
                            width: 110,
                            slot: "place"
                        },
                        {
                            title: "*台数",
                            align: "center",
                            width: 90,
                            slot: "quantity"
                        },
                        {
                            title: "测算依据/必要性说明",
                            align: "center",
                            minWidth: 180,
                            slot: "purpose"
                        },
                        {
                            slot: 'action',
                            align: 'center',
                            width: 166,
                            fixed: 'right',
                            renderHeader: (h, index) => {
                               return h('div', [
                                    h(!this.ifedit?'Button':"", {
                                        props: {
                                            type: 'primary',
                                            // size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                if(!this.ifedit){
                                                    this.addRow()
                                                }
                                            }
                                        }
                                    }, !this.ifedit?'新增':"")
                                ])
                            }
                        },
                    ],
                    
                    transfer: true,
                },
                
                applyinfo:{
                    base: {
                        applyDate: "",
                        compId: "",
                        userName: "",
                        userId: "",
                        applyCardId: "",
                        telephone: "",
                        email: "",
                        applydept: ""
                    },
                    projectInfo: {
                        roleId: "",         //租户id
                        roleName: "",       //租户名称
                        projectID: "",      //关联项目ID
                        projectName: "",    //关联项目名称

                        entryStartTime: "", //开始时间
                        entryEndTime: "",   //结束时间
                        entryCycle: "",     //入驻周期
                        entryPosition: "",  //入驻地址
                        isContract: "",    //是否签订合同
                        projectType: "",    //项目类型

                        projectManager: "", //项目经理
                        managerTel: "",     //项目经理联系方式
                        projectDoc: ""      //项目介绍
                    },
                    resourcesInfo:{ 
                        len: 0,//合并的行数
                        resourceChcekList: [],//选择的申请资源清单列表
                        resourceInfo: [], //资源清单字段详情
                        seversList:[],  //云服务字段列表
                    },
                    resources: [],
                    severs: [],
                    tools:  {
                        checkList: [],   //选择的列表
                        needResources:[],
                        needSevers:[]
                    },
                    datas: [],
                    files: []
                }
            }
        },
        created:function(){

        },
        mounted:function() {
            console.log("this.reqId,this.draftsId---------->",this.reqId,this.draftsId)
            this.setInfo()
           
        },
        
        methods: {
            //获取租户角色
            // 获取提交表单人基本信息
            getApplyUser(userId){ 
                var that=this;
                var url=this.CONFIG.url_know+'/user/' + userId;
                ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        console.log("user----->", data)
                        that.applyinfo.base.userName = data.user_name
                        that.applyinfo.base.userId = data.id
                        that.applyinfo.base.applyCardId = data.id_card
                        that.applyinfo.base.telephone = data.phone
                        that.applyinfo.base.email = data.email
                        that.applyinfo.base.applydept = that.processInfo.dptName
                    }
                })
            },
             //获取草稿或者表单详情
            setInfo(){
                this.getResourceList();//获取表单基础信息
                if( this.reqId != null){
                    this.getApplyInfo(); //获取表单详情
                }else if(this.draftsId != null){
                    console.log("获取草稿---------->")
                    this.getDrafts()
                }else{
                    this.getUserInfo(); // 获取登录用户信息
                }
            },
            getUserInfo(){
                console.log("获取用户基础信息------->",this.$store.state.user)
                var temp = this.$store.state.user
                this.applyinfo.base.userName = temp.user_name
                this.applyinfo.base.userId = temp.id
                this.applyinfo.base.applyCardId = temp.id_card
                this.applyinfo.base.telephone = temp.phone
                this.applyinfo.base.email = temp.email
                this.applyinfo.base.applydept = temp.department
            },
            //获取草稿详情
            getDrafts(){
                var url = this.CONFIG.base_url_test + "/draft/content/" + this.draftsId
                var that=this;
                ajax.get({
                    url: url,
                    that: that,
                    params: null,
                    success:function(data){
                        that.applyinfo = data.severs
                    }
                })
            },
            
            getApplyInfo(){
                var data = this.processInfo
                console.log("data---->",data)
                this.getApplyUser(data.content.overview.userId)
                this.setSeverInfo(data.content.severs) 
                this.applyinfo.files = data.content.files
                console.log("applyinfo---->",this.applyinfo)
            },
            setSeverInfo(sever){
                console.log(sever)
                this.applyinfo.severs = []
                sever.forEach(item =>{
                    var temp = []
                    temp = item.service
                    temp.quantity = item.quantity
                    temp.purpose = item.purpose
                    temp.severId = item.severId
                    temp.place = item.place
                    temp.sysRaid = item.sysRaid
                    temp.dataRaid = item.dataRaid
                    temp.os = item.os
                    this.applyinfo.severs.push(temp)
                })

            },
           
            //资源清单_获取基础信息
            getResourceList(){
                console.log("获取基础信息---->")
                var url = this.CONFIG.progress_url + "/service-list"
                var that=this;
                ajax.get({
                    url: url,
                    that: that,
                    params: null,
                    success:function(data){
                        that.applyinfo.resourcesInfo.seversList = data.severList
                    }
                })
            },
            //添加
            addRow(){ //资源清单，添加
                this.applyinfo.severs.push({
                    "cpuQuantity": 0,
                    "dataRaid": "",
                
                    "os": "",
                    "overId": 0,
                    "purpose": "",
                    "quantity": 0,
                    "ramQuantity": 0,
                    "severId": 0,
                    "severName": "",
                    "status": 0,
                    "sysRaid": "",
                    place: "",
                })
            },
            setSeverID(index){
                this.tooltipDisabled = true
                console.log(this.tooltipDisabled)
                this.applyinfo.resourcesInfo.seversList.some( item =>{
                    if(item.id == this.applyinfo.severs[index].severId){
                        console.log(item)
                        this.applyinfo.severs[index].severName = item.severName
                        this.applyinfo.severs[index].ramQuantity = item.ramQuantity
                        this.applyinfo.severs[index].cpuQuantity = item.cpuQuantity

                        this.applyinfo.severs[index].sysUnit = item.sysUnit
                        this.applyinfo.severs[index].sysVolumn = item.sysVolumn
                        this.applyinfo.severs[index].dataUnit = item.dataUnit
                        this.applyinfo.severs[index].dataVolumn = item.dataVolumn
                        return true
                    }
                })
                setTimeout(()=>{
                    this.$nextTick(()=>{
                        this.tooltipDisabled = false
                        console.log(this.tooltipDisabled)
                    })
                },500)
            },
            deleteRow(row,index){//删除资源清单
                this.applyinfo.severs.splice(index, 1);
            },
           
            //获取表单信息并加以处理
            getInfo(){
                var temp = this.applyinfo
                var info = {
                    base:{},
                    projectInfo:{},
                    resources: [],
                    severs: [],
                    tools: [],
                    datas: [],
                    files: []
                }

                info.base = temp.base
                info.base.dptName = this.applyinfo.base.applydept
                //info.projectInfo = temp.projectInfo

                info.files = this.$refs.file.getFiles()

                //处理resourceList
                info.severs = temp.severs
                console.log("----------",info);
                var publicInfo = this.utils.setPublicInfoInfo(temp.projectInfo.projectName,0,0,temp.projectInfo.projectDoc)
                info.puslicInfo = publicInfo
                return info;
            },
            validate(){
                return true
            },
           
        },
        props: {
            ifedit: {
                type: Boolean,
                default: false,
            },
            reqId: {
                default: null
            },
            draftsId:{
                default: null
            },
            filesList:{},
            processInfo:{},
            ishidden:{
                type: Boolean,
                default: false,
            },
        },
        // computed:{
        //     isEdit(){
        //         return this.$store.state.tabs != undefined && this.$store.state.tabs!=null? this.$store.state.tabs.isEdit:""
        //     }
        // },
        watch:{
            processInfo(Val){
                this.getApplyInfo()
            }
        }
        
    }

</script>